<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '退回定金申请',
			size: '40%',
			appendToBody: true
		}"
		showConfirm
		confirmText="提交申请"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<el-form-item label="定金信息">
				<el-card shadow="never">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="退定金日期" prop="back_date">
								<cl-date-picker
									v-model="form.back_date"
									placeholder="选择日期"
									style="width: 100%"
									value-format="yyyy-MM-dd"
									:clearable="false"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="退款金额" prop="back_money">
								<el-input
									oninput="value=value.replace(/[^\d^\.]/g,'')"
									@blur="form.back_money = $event.target.value"
									v-model="form.back_money"
									placeholder="请输入退款金额"
									disabled
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="退款方式" prop="back_type">
								<cl-select
									v-model="form.back_type"
									placeholder="请选择退款方式"
									style="width: 100%"
								>
									<el-option
										v-for="(item, index) in backType"
										:key="index"
										:label="item.label"
										:value="item.value"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="退款人姓名" prop="back_user_name">
								<el-input
									v-model="form.back_user_name"
									placeholder="请输入退款人姓名"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="退款人账号" prop="back_user_account">
								<el-input
									oninput="value=value.replace(/[\u4e00-\u9fa5]/ig,'')"
									@blur="form.back_user_account = $event.target.value"
									v-model="form.back_user_account"
									placeholder="请填写退款人账号"
								/>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form-item>
			<el-form-item label="退款原因" prop="back_why">
				<el-input
					v-model="form.back_why"
					placeholder="请填定退款原因"
					type="textarea"
					:rows="3"
				/>
			</el-form-item>
			<el-form-item label="上传图片" prop="images">
				<cl-upload
					multiple
					:limit="3"
					:limit-size="3"
					list-type="picture-card"
					ref="uploads"
					v-model="form.images"
					:on-success="onUploadSuccess"
					
				/>
				<div class="s-tips">最多可上传3张图片，文件小于3M</div>
			</el-form-item>
		</el-form>
	</cl-drawer>
</template>
<script>
import constant from "@/constant";
import dayjs from "dayjs";

export default {
	props: {
		detail: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			payTypeList: constant.PAY_TYPE,

			backType: [
				{ label: "微信", value: 1 },
				{ label: "支付宝", value: 2 },
				{ label: "银行卡", value: 3 }
			],
			form: {
				dep_id: "",
				back_date: dayjs().format("YYYY-MM-DD"),
				back_money: "",
				back_type: "",
				back_user_name: "",
				back_user_account: "",
				back_why: "", //退回原因
				back_user_bank_as: "", //银行开户行
				images: ""
			},
			rules: {
				back_date: [{ required: true, message: "请选择退定金日期", trigger: "change" }],
				back_money: [{ required: true, message: "请填写退款金额", trigger: "change" }],
				back_type: [{ required: true, message: "请选择退款方式", trigger: "change" }],
				back_user_name: [
					{ required: true, message: "请填写退款人姓名", trigger: "change" }
				],
				back_user_account: [
					{ required: true, message: "请填写退款人账号", trigger: "change" }
				],
				back_why: [{ required: true, message: "请填写退回原因", trigger: "change" }],
				images: [{ required: true, message: "请上传图片", trigger: "change" }]
			},
			saving: false
		};
	},
	methods: {
		open(row) {
			this.$refs.drawer.create(() => {
				this.reset();
				const { cus_name } = this.detail;
				this.form.dep_id = row.id;
				this.form.back_money = row.dep_amount * 1;
				this.form.back_user_name = cus_name;
				this.form.back_date = dayjs().format("YYYY-MM-DD");
				this.form.images = "";
			});
		},
		close() {
			this.$refs.drawer.close();
		},
		onUploadSuccess(res) {
			console.log(res);
			this.form.images = res.data
			// this.file.push()
		},
		reset() {
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const { images, ...args } = this.form;
				let form = { ...args, images};

				this.saving = true;
				await this.$service.deposit.refund(form).done(() => {
					this.saving = false;
				});
				this.$message.success("操作成功");
				this.$emit("confirm");
				this.close();
			});
		}
	}
};
</script>
